<template>
  <div>
    <div>
    <el-row :gutter="20">
            <el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addButton = true">道具添加</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row> 
        <!-- 全查 -->
    <el-table :data="tableData" style="width: 100%" :header-cell-class-name="'headerBg'" >
    <el-table-column
      label="道具名称"
      prop="propName"
      height="500"
      align="center">
    </el-table-column>
    <el-table-column
      label="道具功能介绍"
      prop="propDetailed"
      align="center">
    </el-table-column>
    <el-table-column  label="道具图片" align="center">
      <template slot-scope="scope">
        <el-image style="width: 60px; height: 60px" :src="'http://101.43.223.224:8765/image/getImageById?id=' + scope.row.propImg"></el-image>
        </template>
    </el-table-column>
    <el-table-column
      label="创建时间"
      prop="createTime"
      align="center">
    </el-table-column>
    <!-- <el-table-column
      label="修改时间"
      prop="updateTime"
      align="center">
    </el-table-column>
    <el-table-column label="道具状态"  align="center">
        <template slot-scope="scope">
              <el-switch v-model="scope.row.upFlag"
                  active-color="#13ce66"
                  inactive-color=""
                  :active-value="0"
                  :inactive-value="1"
                  @change=updateFlag(scope.row)>
              </el-switch>
        </template>
    </el-table-column> -->
    <el-table-column label="操作" align="center">
        <template slot-scope="scope">
        <el-button type="text" size="mini"  style="background:none;border:0px"><span style="color:#409EFF;" @click="update(scope.row)"><i class="el-icon-edit"></i>修改</span></el-button>
        </template> 
    </el-table-column>
  </el-table>
    </div>
    <!-- 分页 -->
<el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total" background :current-page.sync="pages.pageNum"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    <!-- 上传图片表单 -->
      <el-dialog :visible.sync="addButton" width="30%" style="text-align: left">
        <el-form stripe style="width: 100%; text-align: left" :model="addForm" ref="addForm" :rules="rules">
          <el-form-item>
            <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
            <span style="margin-left: 20px">道具图片</span>
            <el-upload class="avatar-uploader" action="" list-type="picture-card" style="margin-top: -40px; margin-left: 100px;width:30%" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img height="150" v-if="carouselImg" :src="carouselImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

        <el-form-item prop="propName">
        <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
        <span style="margin-left: 20px">道具名称：</span>
        <el-input v-model="addForm.propName" placeholder="输入道具名称" style="width: 130px;"></el-input>
        </el-form-item>

        <el-form-item prop="propDetailed">
        <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
        <span style="margin-left: 20px">道具功能介绍：</span>
        <el-input v-model="addForm.propDetailed" placeholder="输入道具功能介绍" style="width: 130px;"></el-input>
        </el-form-item>
        
        </el-form>
        <el-button style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)" @click="addcarousel('addForm')">确 定</el-button>
        <el-button @click="addButton = false" style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)">取 消</el-button>
      </el-dialog>
        <!-- 修改图片表单 -->
        <el-dialog :visible.sync="updateButton" width="30%" style="text-align: left">
        <el-form stripe style="width: 100%; text-align: left" :model="updateForm" ref="updateForm" :rules="rules">
          <el-form-item>
            <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
            <span style="margin-left: 20px">道具图片：</span>
            <el-upload class="avatar-uploader" action="" style="margin-top: -40px; margin-left: 100px" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUploadup">
              <img height="80" v-if="carouselupImg" :src="carouselupImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

        <el-form-item prop="propName">
        <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
        <span style="margin-left: 20px">道具名称：</span>
        <el-input v-model="updateForm.propName" placeholder="输入道具名称" style="width: 100px;"></el-input>
        </el-form-item>
        
        <el-form-item prop="propDetailed">
        <span style="font-weight: 900; color: rgb(93, 142, 255)">|</span>
        <span style="margin-left: 20px">道具功能介绍：</span>
        <el-input v-model="updateForm.propDetailed" placeholder="输入道具功能介绍" style="width: 250px;"></el-input>
        </el-form-item>

        </el-form>
        <el-button style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)" @click="updatecarousel('updateForm')">确 定</el-button>
        <el-button @click="updateButton = false" style="background-color: rgb(234, 244, 255); color: rgb(96, 169, 255)">取 消</el-button>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      updateButton:false,
      addButton:false,
      tableData: [],
      updateForm:{},
      addForm:{},
      carouselupImg:'',//修改图片路径及其图片
      imgupCarousel:'',//修改图片信息

      carouselImg:'',//添加图片路径及其图片
      imgCarousel:'',//添加图片信息
      pages: {
        //分页参数
        total: 0, // 数据总条数
        pageNum: 1, // 当前页
        pageSize: 5, // 每页条数
      },
      rules: {
         propName: [
           { required: true, message: "请输入角色名称", trigger: "blur" },
         ],
         propDetailed: [
           { required: true, message: "请输入所需经验", trigger: "blur" },
         ],
       },
    };
  },
   mounted () {
    this.selectProp()

  },
  methods: {
    
    selectProp() {
      // 查询所需数据(全查)
      this.$axios
        .get("/prop/selectProp", {
          params: {
            pageNum: this.pages.pageNum, // 当前页
            pageSize: this.pages.pageSize, // 每条页数
          },
        })
        .then((res) => {
          if (res.data.data.code=200) {
            this.tableData = res.data.data.data.content;
            this.pages.total = res.data.data.data.totalSize;
            //课程价格
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    update(row){
      this.updateButton=true,
      this.updateForm = JSON.parse(JSON.stringify(row))
      this.carouselupImg = 'http://101.43.223.224:8765/image/getImageById?id=' + row.propImg;
    },
    updatecarousel(updateForm){
      if(this.imgupCarousel == ""){
          this.$message.error("图片不能为空")
          return 
        }
        if(this.updateForm.propName == " "){
          this.$message.error("道具名称不能输入空格")
          return 
        }
        if(this.updateForm.propDetailed == " "){
          this.$message.error("道具介绍不能输入空格")
          return 
        }
      this.$refs[updateForm].validate((valid) =>{
        if (valid) {
          const formDatas = new FormData()
            formDatas.set("id", this.updateForm.id)
            formDatas.set("propName", this.updateForm.propName);
            formDatas.set("propDetailed", this.updateForm.propDetailed);
          // 轮播图片
          if (this.imgupCarousel) {
            formDatas.set('file', this.imgupCarousel, this.imgupCarousel.name)
          }
          this.$axios.post("/prop/updateProp", formDatas).then((res) => {
            if (res.data.data.code == 200) {
              this.$message.success(res.data.data.data)
              this.updateForm = {}
              // 关闭窗口
              this.updateButton = false 
              //刷新
              this.selectProp()
            } else {
              this.$message.error('warning', res.data.data.data)
            }
          }).catch((err) => {
            console.log(err)
          })
          } else {
          this.$message.error('请按照要求输入信息')
            console.log('error submit!!')
            return false
        }
      })
    }, 
    addcarousel(addForm){
      if(this.imgCarousel == ""){
          this.$message.error("图片不能为空")
          return 
        }
        if(this.addForm.propName == " "){
          this.$message.error("道具名称不能输入空格")
          return 
        }
        if(this.addForm.propDetailed == " "){
          this.$message.error("道具介绍不能输入空格")
          return 
        }
      this.$refs[addForm].validate((valid) =>{
        if (valid) {
          const formData = new FormData()
            formData.set("propName", this.addForm.propName);
            formData.set("propDetailed", this.addForm.propDetailed);
          // 轮播图片
          if (this.imgCarousel) {
            formData.set('file', this.imgCarousel, this.imgCarousel.name)
          }
          this.$axios.post("/prop/addProp", formData).then((res) => {
            if (res.data) {
              this.$message.success(res.data.data.data)
              //清空表单
              this.addForm={}
              this.carouselImg = ''
              // 关闭窗口
              this.addButton = false 
              //刷新
              this.selectProp()
            } else {
              this.$message.error('warning', res.data.data.data)
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          this.$message.error('请按照要求输入信息')
            console.log('error submit!!')
            return false
        }
      })
    },
    // 轮播图启用方法
    updateFlag(row){
        const forms = new FormData();
        forms.set("id", row.id);
        forms.set("upFlag", row.upFlag);
        this.$axios
          .post("/prop/updateFlag",forms)
          .then((res) => {
            if ((res.data.data.code == 200)) {
              this.myMessage("success", res.data.data.data);
            } else {
              this.myMessage("wanging", res.data.data.data);
            }
          })
          .catch(() => {
            this.myMessage("info", "网络错误");
          });
    },
    // 文件上传校验
    beforeAvatarUploadup(file) {
      //上传图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
        return false;
      }
      this.imgupCarousel = file;
      this.carouselupImg = URL.createObjectURL(file);
      return false;
    },
    // 文件上传校验
    beforeAvatarUpload(file) {
      //上传图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
        return false;
      }
      this.imgCarousel = file;
      this.carouselImg = URL.createObjectURL(file);
      return false;
    },
    // 分页插件方法
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.selectProp();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.selectProp();
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    handleAvatarSuccess() {
    },
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

<style>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 97px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-left: 55px;
    margin-bottom: 0;
    width: 50%;
  }
  .el-table--mini .el-table__cell {
    padding: 30px 0;
}
.headerBg {
   background: #f8f8f9 !important;
}
</style>